<!--24小时天气预测-->
<template>
  <div id="twentyFourH">
    <div class="box-header">
      <table>
        <tr>
          <td>
            <button
                class="button-1"
                v-bind:style="backBut1"
                @click="isSHow(1)"
            >南明区</button>
          </td>
          <td>
            <button
                class="button-2"
                v-bind:style="backBut2"
                @click="isSHow(2)"
            >云岩区</button>
          </td>
          <td>
            <button
                class="button-3"
                v-bind:style="backBut3"
                @click="isSHow(3)"
            >花溪区</button>
          </td>
          <td>
            <button class="button-4"
                    v-bind:style="backBut4"
                    @click="isSHow(4)"
            >乌当区</button>
          </td>
          <td>
            <button class="button-5"
                    v-bind:style="backBut5"
                    @click="isSHow(5)"
            >白云区</button>
          </td>
          <td>
            <button class="button-6"
                    v-bind:style="backBut6"
                    @click="isSHow(6)"
            >观山湖区</button>
          </td>
        </tr>
      </table>
    </div>

    <div class="box-bottom">
      <div id="box-bottom-top">
        <div class="box-bottom-1">
          <div class="box-bottom-11">
            <p style="font-size: 18px;color: #4e5ef3">
              {{inintGetData1[0]}}
            </p>
            <hr color="red" width="220px">
            <p>
              空气质量数据发布时间：
              <span>{{inintGetData1[1]}}</span>
            </p>
            <p>
              空气质量指数:
              <span>{{inintGetData1[2]}}</span>
            </p>
            <p>
              空气质量指数等级:
              <span>{{inintGetData1[3]}}</span>
            </p>
            <p>
              空气质量指数级别:
              <span>{{inintGetData1[4]}}</span>
            </p>
            <p>
              空气质量范畴:
              <span v-if="inintGetData1[5] === 'NA'">优</span>
              <span v-if="inintGetData1[5] !== 'NA'">{{inintGetData1[4]}}</span>
            </p>
          </div>
          <div class="box-bottom-12">
            <p>
              PM10:
              <span>{{inintGetData1[6]}}</span>
            </p>
            <p>
              PM2.5:
              <span>{{inintGetData1[7]}}</span>
            </p>
            <p>
              二氧化氮:
              <span>{{inintGetData1[8]}}</span>
            </p>
            <p>
              二氧化硫:
              <span>{{inintGetData1[9]}}</span>
            </p>
            <p>
              一氧化碳:
              <span>{{inintGetData1[10]}}</span>
            </p>
            <p>
              臭氧:
              <span>{{inintGetData1[11]}}</span>
            </p>

          </div>
        </div>
        <div class="box-bottom-2">
          <el-table
              :data="tableData"
              stripe
              style="width: 100%;">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="指数"
                width="180">
            </el-table-column>
            <el-table-column
                prop="category"
                label="范畴">
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="text"
                label="寄语">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div id="box-bottom-main"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'TwentyFourH',
  data() {
    return {
      backBut1: "",
      backBut2: "",
      backBut3: "background-color: #4e5ef3;color: white;",
      backBut4: "",
      backBut5: "",
      backBut6: "",
      tableData: [],
      inintGetData1: []
    }
  },
  mounted() {
    this.initData("getData3");
    this.initGetData2('getData3');
    this.initGetData1('getData3');
  },
  methods: {
    initData(param) {
      let data_date = []; //时间
      let data_txt = []; // 天气状况
      let data_pressure = []; // 大气压强, 百帕
      let data_windDir = []; // 风向
      let data_wind360 = []; // 风向360角度
      let data_windScale = []; // 风力等级
      let data_temp = []; // 温度
      let data_pop = []; // 降水概率
      let data_cloud = []; // 云量
      let data_precip = []; // 降水量
      let data_dew = []; // 露点温度
      let data_windSpeed = []; // 风速
      let data_humidity = []; // 相对湿度
      this.$axios.get('/api/twentys/' + param, {

      }).then(res =>{
        if (res.data.code === 20041) {
          let list_1 = []
          for (let i = 0; i < res.data.data['hourly'].length; i++) {
            let date_1 = res.data.data['hourly'][i].fxTime; //2023-11-28T12:00+08:00"
            list_1 = date_1.toString().split("T");
            let list_2 = list_1[1].split("+");
            data_date.push(list_2[0]); //时间
            data_txt.push(res.data.data['hourly'][i].text); // 天气状况
            data_pressure.push(res.data.data['hourly'][i].pressure + "百帕"); // 大气压强, 百帕
            data_windDir.push(res.data.data['hourly'][i].windDir); // 风向
            data_wind360.push(res.data.data['hourly'][i].wind360 + "°"); // 风向360角度
            data_windScale.push(res.data.data['hourly'][i].windScale + "级"); // 风力等级
            //
            data_temp.push(res.data.data['hourly'][i].temp);
            data_pop.push(res.data.data['hourly'][i].pop);
            data_cloud.push(res.data.data['hourly'][i].cloud);
            data_precip.push(res.data.data['hourly'][i].precip);
            data_dew.push(res.data.data['hourly'][i].dew);
            data_windSpeed.push(res.data.data['hourly'][i].windSpeed);
            data_humidity.push(res.data.data['hourly'][i].humidity);
          }
          var chartDom = document.getElementById('box-bottom-main');
          var myChart = echarts.init(chartDom);
          var option = {
            title: {
              text: '24小时天气预测',
            },
            grid: {
              show: true,
              backgroundColor: 'transparent',
              opacity: 0.3,
              borderWidth: '0',
              top: '180',
              bottom: '0'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              show: false
            },
            xAxis: [
              // 日期
              {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 120,
                zlevel: 100,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  interval: 0,
                  formatter: [
                    '{a|{value}}'
                  ].join('\n'),
                  rich: {
                    a: {
                      // color: 'white',
                      fontSize: 18
                    }
                  }
                },
                nameTextStyle: {

                },
                data: data_date,
              },
              // 天气情况
              {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 95,
                zlevel: 120,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  interval: 0,
                  formatter: [
                    '{a|{value}}'
                  ].join('\n'),
                  rich: {
                    a: {
                      color: 'blue',
                      fontSize: 16
                    }
                  }
                },
                nameTextStyle: {

                },
                data: data_txt,
              },
              // 大气压强
              {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 70,
                zlevel: 120,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  interval: 0,
                  formatter: [
                    '{a|{value}}'
                  ].join('\n'),
                  rich: {
                    a: {
                      // color: 'white',
                      fontSize: 12,
                      color: '#07f51f'
                    }
                  }
                },
                nameTextStyle: {

                },
                data: data_pressure,
              },
              // 风向
              {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 50,
                zlevel: 100,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  interval: 0,
                  formatter: [
                    '{a|{value}}'
                  ].join('\n'),
                  rich: {
                    a: {
                      fontSize: 14
                    }
                  }
                },
                nameTextStyle: {
                  fontWeight: 'bold',
                  fontSize: 19
                },
                data: data_windDir
              },
              // 风向角度
              {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 30,
                zlevel: 100,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  interval: 0,
                  formatter: [
                    '{a|{value}}'
                  ].join('\n'),
                  rich: {
                    a: {
                      fontSize: 14,
                      color: '#f5d407'
                    }
                  }
                },
                nameTextStyle: {
                  fontWeight: 'bold',
                  fontSize: 19
                },
                data: data_wind360
              },
              // 风力等级
              {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 10,
                zlevel: 100,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                nameTextStyle: {
                  fontWeight: 'bold',
                  fontSize: 20,
                },
                data: data_windScale
              }
            ],
            yAxis: {
              type: 'value',
              show: false,
              axisLabel: {
                formatter: '{value} °C',
                color: 'white'
              }
            },
            series: [
              {
                name: '温度',
                type: 'line',
                data: data_temp,
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: '#C95843'
                  }
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{c} °C'
                },
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  opacity: 1,
                  color: 'transparent'
                }
              },
              {
                name: '降水概率',
                type: 'line',
                data: data_pop,
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: '#250cea'
                  }
                },
                label: {
                  show: true,
                  position: 'bottom',
                  formatter: '{c} %'
                },
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  opacity: 1,
                  color: 'transparent'
                }
              },
              {
                name: '云量',
                type: 'line',
                data: data_cloud,
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: '#eb9c14'
                  }
                },
                label: {
                  show: true,
                  position: 'bottom',
                  formatter: '{c}'
                },
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  opacity: 1,
                  color: 'transparent'
                }
              },
              {
                name: '降水量',
                type: 'line',
                data: data_precip,
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: '#ee59c1',
                  }
                },
                label: {
                  show: true,
                  position: 'bottom',
                  formatter: '{c} ml'
                },
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  opacity: 1,
                  color: 'transparent'

                }
              },
              {
                name: '露点温度',
                type: 'line',
                data: data_dew,
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: '#06e09d'
                  }
                },
                label: {
                  show: true,
                  position: 'bottom',
                  formatter: '{c} °C'
                },
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  opacity: 1,
                  color: 'transparent'
                }
              },
              {
                name: '风速',
                type: 'line',
                data: data_windSpeed,
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: '#131113'
                  }
                },
                label: {
                  show: true,
                  position: 'bottom',
                  formatter: '{c} km/h'
                },
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  opacity: 1,
                  color: 'transparent'
                }
              },
              {
                name: '相对湿度',
                type: 'line',
                data: data_humidity,
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: 'rgba(136,201,67,0.95)'
                  }
                },
                label: {
                  show: true,
                  position: 'bottom',
                  formatter: '{c} °C'
                },
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  opacity: 1,
                  color: 'transparent'
                }
              }

            ]
          }

          option && myChart.setOption(option);
        }
      }).catch(error =>{
        this.open4(error);
      })


    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '错误信息提示'
      });
    },
    isSHow(id) {
      if(id === 1) {
        this.backBut1 = "background-color: #4e5ef3;color: white;";
        this.backBut2 = "";
        this.backBut3 = "";
        this.backBut4 = "";
        this.backBut5 = "";
        this.backBut6 = "";
        this.inintGetData1 = [];
        this.initGetData1('getData1');
        this.tableData = [];
        this.initGetData2('getData1');
        this.initData("getData1");
      }else if(id === 2) {
        this.backBut1 = "";
        this.backBut2 = "background-color: #4e5ef3;color: white;";
        this.backBut3 = "";
        this.backBut4 = "";
        this.backBut5 = "";
        this.backBut6 = "";
        this.inintGetData1 = [];
        this.initGetData1('getData2');
        this.tableData = []
        this.initGetData2('getData2');
        this.initData("getData2");
      }else if(id === 3) {
        this.backBut1 = "";
        this.backBut2 = "";
        this.backBut3 = "background-color: #4e5ef3;color: white;";
        this.backBut4 = "";
        this.backBut5 = "";
        this.backBut6 = "";
        this.inintGetData1 = [];
        this.initGetData1('getData3');
        this.tableData = []
        this.initGetData2('getData3');
        this.initData("getData3");
      }
      else if(id === 4) {
        this.backBut1 = "";
        this.backBut2 = "";
        this.backBut3 = "";
        this.backBut4 = "background-color: #4e5ef3;color: white;";
        this.backBut5 = "";
        this.backBut6 = "";
        this.inintGetData1 = [];
        this.initGetData1('getData4');
        this.tableData = []
        this.initGetData2('getData4');
        this.initData("getData4");
      }
      else if(id === 5) {
        this.backBut1 = "";
        this.backBut2 = "";
        this.backBut3 = "";
        this.backBut4 = "";
        this.backBut5 = "background-color: #4e5ef3;color: white;";
        this.backBut6 = "";
        this.inintGetData1 = [];
        this.initGetData1('getData5');
        this.tableData = []
        this.initGetData2('getData5');
        this.initData("getData5");
      }else if(id === 6) {
        this.backBut1 = "";
        this.backBut2 = "";
        this.backBut3 = "";
        this.backBut4 = "";
        this.backBut5 = "";
        this.backBut6 = "background-color: #4e5ef3;color: white;";
        this.inintGetData1 = [];
        this.initGetData1('getData6');
        this.tableData = []
        this.initGetData2('getData6');
        this.initData("getData6");
      }
    },
    initGetData1(param) {
      this.$axios.get('/api/airQualitys/' + param, {

      }).then(res =>{
        if (res.data.code === 20041) {
          this.inintGetData1.push(
              res.data.data.refer['sources'][0]
          );
          this.inintGetData1.push(
              res.data.data.now.pubTime
          );
          this.inintGetData1.push(
              res.data.data.now.aqi
          );
          this.inintGetData1.push(
              res.data.data.now.level
          );
          this.inintGetData1.push(
              res.data.data.now.category
          );
          this.inintGetData1.push(
              res.data.data.now.primary
          );
          this.inintGetData1.push(
              res.data.data.now.pm10
          );
          this.inintGetData1.push(
              res.data.data.now.pm2p5
          );
          this.inintGetData1.push(
              res.data.data.now.no2
          );
          this.inintGetData1.push(
              res.data.data.now.so2
          );
          this.inintGetData1.push(
              res.data.data.now.co
          );
          this.inintGetData1.push(
              res.data.data.now.o3
          );
        }
      }).catch(error =>{
        this.open4(error);
      })
    },
    initGetData2(param) {
      this.$axios.get('/api/weatherIndexs/' + param, {

      }).then(res =>{
        if (res.data.code === 20041) {
          for (let i = 0; i < res.data.data.daily.length; i++) {
            this.tableData.push(
                {
                  date: res.data.data.daily[i].date,
                  name: res.data.data.daily[i].name,
                  category: res.data.data.daily[i].category,
                  text: res.data.data.daily[i].text
                }
            )
          }

        }
      }).catch(error =>{
        this.open4(error);
      })
    }

  }
}

</script>

<style scoped>
@import "css/TwentyFourH.css";
</style>